<template>
    <div class="layout">
        <!-- 00 页面顶部 -->
        <div class="page-top">
            <div class="container">
                <div class="row">
                    <div class="col-md-5">
                        <router-link class="btn-danger btn btn-sm" to="/register">免费注册</router-link>
                        <router-link class="btn btn-sm ml-5" to="/login">登录</router-link>
                    </div>
                    <div class="col-md-4"></div>
                    <div class="col-md-3">
                        <router-link class="mylink" to="/message">留言</router-link>
                        <router-link class="mylink" to="/concat">联系作者</router-link>
                    </div>
                </div>
            </div>
        </div>
        <!-- 01 导航 -->
        <nav class="navbar navbar-expand-lg page-navbar">
            <div class="container">
                <a class="navbar-brand" href="#">
                    <h3>北业TU</h3>
                </a>
                <button @click="showMenuFn" class="navbar-toggler" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div :class="['collapse', 'navbar-collapse', isShow ? 'myshow' : 'myhide']" id="navbarSupportedContent">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                            <router-link to="/home" class="nav-link" aria-current="page" active-class="current"
                                @click="isShow = false">首页</router-link>
                        </li>
                        <li class="nav-item">
                            <router-link to="/work-life" class="nav-link" active-class="current"
                                @click="isShow = false">工作生活</router-link>
                        </li>
                        <li class="nav-item">
                            <router-link to="/study-more" class="nav-link" active-class="current"
                                @click="isShow = false">技能提升</router-link>
                        </li>
                        <li class="nav-item">
                            <router-link to="/hobby-part" class="nav-link" active-class="current"
                                @click="isShow = false">兴趣爱好</router-link>
                        </li>
                    </ul>
                    <form class="d-flex" role="search">
                        <input @focus="jumpTo" class="form-control me-2" type="search" placeholder="请输入关键字"
                            aria-label="Search">
                    </form>
                </div>
            </div>
        </nav>
        <!-- 02 路由出口（二级）  -->
        <router-view v-slot="{ Component }">
            <transition enter-active-class="animate__animated animate__bounceInRight">
                <component :is="Component" />
            </transition>
        </router-view>

        <!-- 03 页面底部 -->
        <div class="page-bottom">
            <div class="container d-flex justify-content-between">
                <div>
                    <router-link class="btn-danger btn btn-sm" to="/register">免费注册</router-link>
                    <router-link class="btn btn-sm ml-5" to="/login">登录</router-link>
                </div>
                <div>
                    <router-link class="mylink" to="/message">留言</router-link>
                    <router-link class="mylink" to="/concat">联系作者</router-link>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router'
const router = useRouter()
const isShow = ref<boolean>(false)
const showMenuFn = () => {
    isShow.value = !isShow.value;
}
const jumpTo = () => {
    router.push({ path: "/search" })
}
</script>


<style lang="less">
@import "./assets/varable.less";

.layout {
    font-family: 吉页大字体简;
    font-size: 16px;
}

.navbar-toggler:focus {
    box-shadow: none !important;
}

.btn-group-sm>.btn,
.btn-sm:focus {
    border-color: transparent !important;
}

.myshow {
    display: block !important;
    animation: EnterAnimate .2s linear forwards;
}

.mylink {
    color: #000;
    text-decoration: none;
    ;
    margin-right: 15px;
}

.page-navbar {
    // background-color: @active-color;
    margin-bottom: 0px;

    .navbar-brand {
        h3 {
            // color: #fff;
            transform: translateY(10px);
        }
    }

    .nav-link {
        padding: 20px 0px;
        border-bottom: 1px solid #f0f0f0;
    }

    .current {
        color: @active-color !important;
    }
}

.page-top {
    .container {
        border-bottom: 1px solid #f0f0f0;
        padding: 10px 10px;

        .row>div {
            display: flex;
            align-items: center;
        }
    }
}

.page-bottom {
    padding: 15px 0px;
    border-top: 1px solid #f0f0f0;
}

@media (min-width: 991px) {
    .nav-link {
        margin: 0px 20px;
        border-bottom: 1px solid transparent !important;
    }
}

@keyframes EnterAnimate {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0px);
    }
}

@media (max-width: 768px) {
    .page-top {
        display: none;
    }
}

@media (min-width: 768px) {
    .page-bottom {
        display: none;
    }
}
</style>